<template>
    <el-col>
        <el-dialog title="增加" :visible.sync="addDialogVisible" :before-close="handleCloseAddDialog">
            <el-form ref="medicineInfo" :model="medicineInfo" lable-width="100px">
                <el-form-item label="医院名" prop="hospitalId" v-if="hospitalId === 'null'">
                    <el-select v-model="medicineInfo.hospitalId" placeholder="医院">
                        <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.hospitalId"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="药品名" prop="name">
                    <el-input v-model="medicineInfo.name" />
                </el-form-item>
                <el-form-item label="库存" prop="inventory">
                    <el-input-number v-model="medicineInfo.inventory"></el-input-number>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input-number v-model="medicineInfo.price" :step="0.1"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseAddDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmAddDialog">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="更新" :visible.sync="updateDialogVisible" :before-close="handleCloseUpdateDialog">
            <el-form ref="medicineInfo" :model="medicineInfo" label-width="100px">
                <el-form-item label="医院名" prop="hospitalId" v-if="hospitalId === 'null'">
                    <el-select v-model="medicineInfo.hospitalId" placeholder="医院">
                        <el-option v-for="(item, index) in hospitalList" :key="index" :value="item.hospitalId"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="药品名" prop="name">
                    <el-input v-model="medicineInfo.name" />
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input-number v-model="medicineInfo.price" :step="0.1"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseUpdateDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmUpdateDialog">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="选择药品" :visible.sync="choiseMedicineDialogVisible"
            :before-close="handleCloseChoiseMedicineDialog">
            <el-form ref="medicineInfo" :model="medicineInfo" label-width="100px">
                <el-form-item label="药品名" prop="name">
                    <el-input v-model="medicineId.name" :disabled="true" />
                </el-form-item>
                <el-form-item label="数量" prop="number">
                    <el-input-number v-model="number" :max="medicineId.inventory"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseChoiseMedicineDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmChoiseMedicineDialog">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="药品清单" :visible.sync="allMedicineDialogVisible">
            <el-form>
                <el-form-item label="患者" label-width="100px">
                    <el-input v-model="id" />
                    <el-button @click="doSelectAllPatient">查询</el-button>
                    <el-input v-model="patientName" :disabled="true" />
                </el-form-item>

                <el-table :data="allMedicine" style="width: 100%">
                    <el-table-column prop="name" label="药品名" width="180">
                    </el-table-column>
                    <el-table-column prop="number" label="数量" width="180">
                    </el-table-column>
                    <el-table-column fixed="right" label="删除" width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleDeleteMedicine(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCloseAllMedicineDialog">取 消</el-button>
                <el-button type="primary" @click="handleConfirmAllMedicineDialog">确 定</el-button>
            </span>
        </el-dialog>
        <el-row>
            <el-col :span="1">
                <el-button type="primary" @click="addDialogVisible = true">增加</el-button>
            </el-col>
            <el-col :span="1">
                <el-button :disabled="multipleSelection.length > 1" type="warning" @click="showUpdateDialogVisible">更新
                </el-button>
            </el-col>
            <el-col :span="1">
                <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
            </el-col>
            <el-col :span="5">
                <el-input v-model="query.name" type="text" />
            </el-col>
            <el-col :span="2">
                <el-button @click="queryClear"> 清除 </el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="doSelectAll"> 搜索 </el-button>
            </el-col>
            <el-col :span="2">
                <el-button @click="(allMedicineDialogVisible = true)">药品清单</el-button>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="medicineList" style="width: 100%" row-key="medicineId" lazy
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="hospitalName" label="医院名"></el-table-column>
            <el-table-column prop="name" label="药品名称"></el-table-column>
            <el-table-column prop="inventory" label="存货"></el-table-column>
            <el-table-column prop="price" label="药品价格"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="showChoiseMedicine(scope.row)" type="text" size="small">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @prev-click="currentChange"
            @next-click="currentChange" @current-change="currentChange" />
    </el-col>
</template>
  
<script>
export default {
    name: "hello",
    data() {
        return {
            addDialogVisible: false,
            updateDialogVisible: false,
            choiseMedicineDialogVisible: false,
            allMedicineDialogVisible: false,

            medicineId: 0,
            hospitalId: 0,
            id: "",

            patientName: "",
            patientId: "",

            medicineInfo: {
                hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
                name: "",
                inventory: "",
                price: "",
            },

            medicineList: [],
            hospitalList: [],

            page: 0,
            pageSize: 10,
            total: 0,

            query: {
                name: "",
                hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
            },

            multipleSelection: [],

            number: 0,

            allMedicine: [],
        };
    },
    created() {
        this.hospitalId =
            localStorage.getItem("hospitalId") === "null"
                ? "null"
                : parseInt(localStorage.getItem("hospitalId"));
        if (this.hospitalId === "null") {
            this.doSelectAllHospital();
        } else {
            this.query.hospitalId = this.hospitalId;
        }
        this.doSelectAll();
    },
    methods: {
        doSelectAllPatient() {
            this.$store
                .dispatch("patient/idToName", {
                    id: this.id != 'null' ? this.id : 0
                })
                .then((res) => {
                    this.patientName = res.name;
                    this.patientId = res.patientId;
                });
        },
        handleCloseAllMedicineDialog() {
            this.allMedicineDialogVisible = false;
        },
        handleConfirmAllMedicineDialog() {
            this.allMedicineDialogVisible = false;
            this.$store.dispatch("order/allSave", {
                patientId: this.patientId,
                allMedicine: this.allMedicine
            }).then(() => { });
        },
        handleDeleteMedicine(subscript) {
            this.allMedicine.splice(subscript, 1);
        },
        handleConfirmChoiseMedicineDialog() {
            this.allMedicine.push({ name: this.medicineId.name, number: this.number });
            this.number = 0;
            this.choiseMedicineDialogVisible = false;
            this.refresh();
        },
        handleCloseChoiseMedicineDialog() {
            this.choiseMedicineDialogVisible = false;
        },
        showChoiseMedicine(medicineId) {
            this.medicineId = medicineId
            this.choiseMedicineDialogVisible = true;
        },
        currentChange(index) {
            this.page = index - 1;
        },
        showUpdateDialogVisible() {
            if (this.multipleSelection.length === 0) {
                this.$message.error("请选择");
                return;
            }
            this.medicineInfo = this.multipleSelection[0];
            this.updateDialogVisible = true;
        },

        showMenuDialogVisible(medicineId) {
            this.medicineId = medicineId;
            this.menuDialogVisible = true;
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        handleCloseAddDialog() {
            this.addDialogVisible = false;
            this.refresh();
        },

        handleConfirmAddDialog() {
            this.$refs.medicineInfo.validate((valid) => {
                if (valid) {
                    this.addDialogVisible = false;
                    this.$store
                        .dispatch("medicine/addMedicine", this.medicineInfo)
                        .then(() => { });
                }
            });
            this.refresh();
        },

        handleCloseUpdateDialog() {
            this.updateDialogVisible = false;
            this.refresh();
        },
        handleConfirmUpdateDialog() {
            this.$refs.medicineInfo.validate((valid) => {
                if (valid) {
                    this.updateDialogVisible = false;
                    this.$store
                        .dispatch("medicine/updateMedicine", this.medicineInfo)
                        .then(() => { });
                }
            });
            this.refresh();
        },

        handleCloseMenuDialog() {
            this.menuDialogVisible = false;
        },
        handleDeleteSelectIds() {
            const ids = [];
            for (const obj of this.multipleSelection) {
                ids.push(obj.medicineId);
            }
            this.$store.dispatch("medicine/deleteMedicine", ids).then(() => { });
            location.reload();
        },

        doSelectAll() {
            this.$store
                .dispatch("medicine/selectAllMedicine", {
                    obj: {
                        name: this.query.name,
                        hospitalId: this.query.hospitalId != "" ? this.query.hospitalId : 0,
                    },
                    page: this.page,
                    pageSize: this.pageSize,
                })
                .then((res) => {
                    console.log(res)
                    this.medicineList = res.list;
                    this.total = res.total;
                });
        },
        doSelectAllHospital() {
            this.$store.dispatch("hospital/allId", {}).then((res) => {
                this.hospitalList = res;
            });
        },

        queryClear() {
            this.query = {
                name: "",
                hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
            };
            this.doSelectAll();
        },

        prevClick() {
            this.page -= 1;
            this.doSelectAll();
        },
        nextClick() {
            this.page += 1;
            this.doSelectAll();
        },

        refresh() {
            this.medicineInfo = {
                hospitalId: this.hospitalId === "null" ? "" : this.hospitalId,
                name: "",
                inventory: "",
                price: "",
            };
            this.doSelectAll();
            this.$refs.multipleTable.clearSelection();
        },
    },
};
</script>
  
<style scoped>
* {
    margin: 10px;
}
</style>